<template>
	<!-- 已登录 -->
	<div v-if="isLogin">
		<!-- 用户信息：用户头像 用户名 背景渐变色图片-->
		<van-cell class="member" center is-link to="login">
			<template #icon>
				<van-image :src="avatar" width="80px"></van-image>
			</template>
			<template #title>
				<span class="title"> {{user.name}} </span>
			</template>
		</van-cell>
		<!-- 用户课操作功能列表 我的订单 地址列表 个人资料 密码修改 退出登录等-->
		<van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
			:to="{name:item.name}" />
		<!-- 退出登录 -->
		<van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
	</div>
	<!-- 未登录 -->
	<div v-else>
		<!-- 用户信息：默认用户头像 登录 / 注册  右侧箭头 背景渐变色图片-->
		<!-- 登录 / 注册 路由login还没完成 -->
		<van-cell class="member" center is-link to="login">
			<template #icon>
				<van-image :src="avatar_default" width="80px"></van-image>
			</template>
			<template #title>
				<span class="title"> 登录 / 注册 </span>
			</template>
		</van-cell>

	</div>
</template>

<script>
	import * as Auth from "@/utils/auth.js" //导入本地存储方法
	import {
		getDetailByIdAPI
	} from "@/api/user.js" //导入用户查询接口（获取用户头像）

	export default {
		name: "user",
		data() {
			return {
				avatar_default: require("@/assets/images/avatar_default.png"), //没有登录时的用户默认头像
				isLogin: false, //是否登录控制变量
				user: {}, //用户对象
				avatar: "", //用户头像

				//我的功能列表
				cellItems: [{
						title: "我的订单",
						name: "orderList", //路由还没实现
						img: "orders-o",
					},
					{
						title: "收货地址",
						name: "addressList", //路由还没实现
						img: "envelop-o",
					},

					{
						title: "我的收藏",
						name: "working",
						img: "point-gift-o",
					},
					{
						title: "个人资料",
						name: "profile",
						img: "user-o",
					},
					{
						title: "修改密码",
						name: "updatePwd",
						img: "records",
					},
				],
			};
		},

		//生命周期钩子函数，当页面渲染完成后被调用
		mounted() {
			//判断本地是否有Token(有的说明用户已登录)
			let token = Auth.getTokenLocal();
			this.isLogin = token ? true : false;

			if (this.isLogin) {
				this.user = Auth.getUserLocal(); //从本地获取用户对象数据
				getDetailByIdAPI(this.user.id).then(result => {
					this.avatar = this.APIDomainName + result.data.avatar; //
				});
			}
		},

		methods: {
			//点击用户退出事件
			onClickLogout() {
				Auth.removeTokenLocal();
				this.avatar = this.avatar_default;
				this.$toast("退出成功");
				this.isLogin = false;
			},
		},

	}
</script>

<style lang="less" scoped="scoped">
	.member {
		margin-top: 15px;
		padding: 10px;
		background-image: linear-gradient(to right, #5c73da, #dad063);
	}

	.title {
		font-size: 24px;
		padding-left: 20px;
		color: blue;

	}
</style>
